<template>
  <div class="cart_box">
    <div class="header_box">
      <div class="wi"></div>
      <div>购物车</div>
      <div class="am" @click="isManage = !isManage">管理</div>
    </div>
    <div class="hei"></div>
    <div class="shop_cart_box">
      <div class="shop_cart_contant">
        <div class="shop_box" v-for="(item ,i) in [1,2]" :key="i">
          <van-checkbox>
            <div class="check_box">
              <div class="c_1">满天星起点点</div>
              <div class="c_2">A级认证</div>
              <van-icon name="arrow" />
            </div>
          </van-checkbox>

          <van-swipe-cell :disabled="!isManage" class="goods_detai_box" v-for="(chil, index) in [1,2,3]" :key="index">
            <div class="g_1" >
              <van-checkbox class="g_2" v-if="isManage" ></van-checkbox>
              <div class="goods_de_1">
                <div class="pop_img_box">
                  <img :src="require('../../assets/images/home_banner.png')" alt />
                  <img class="pop_tag" :src="require('../../assets/images/tg_tb.png')" alt />
                </div>
                <div class="infi_box">
                  <div class="tit_box">
                    <div>满天星</div>
                    <div class="t_1">基地直供</div>
                  </div>
                  <div class="tag_box">
                    <span>A级</span>
                  </div>
                  <div class="er_q">
                    二度开放
                    <van-icon name="arrow-down" />
                  </div>
                  <div class="pic_1">
                    <div class="p_1">
                      <span>￥</span>5.5
                      <span>/束</span>
                    </div>
                    <van-stepper
                      class="steper"
                      v-model="value"
                      input-width="25px"
                      button-size="25px"
                    />
                  </div>
                </div>
              </div>
            </div>

            <template #right>
              <van-button square text="删除" type="danger" class="delete-button" />
            </template>
          </van-swipe-cell>
        </div>
      </div>
    </div>
    <div class="hei2" ></div>
    <div class="bott_cout" >
      <van-checkbox class="check_1" ></van-checkbox>
      <div class="b_c_1" >
        <div class="b_c_2" ><span>合计：</span>123</div>
        <div class="buy" >去结算</div>
      </div>
    </div>
  </div>
</template>
<script>
// import "./style.module.scss";

export default {
  data() {
    return {
      isManage: false,
      value: 1
    };
  }
};
</script>
<style lang="scss" scoped >
.goods-card {
  margin: 0;
}

.delete-button {
  height: 100%;
}
.header_box {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  padding: 16px 0;
  background: white;
  @extend .flex;
  font-size: m-w(36);
  font-family: PingFang SC;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
  .am {
    font-size: m-w(30);
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(169, 174, 192, 1);
    margin-right: m-w(27);
  }
  .wi {
    width: 30px;
  }
}
.hei {
  height: 57px;
}
.cart_box {
  min-height: 100%;
  background: #f7f9fc;
}
.shop_cart_box {
  width: 100%;
  .shop_cart_contant {
    padding: 0 10px;
  }
}
.shop_box {
  background: rgba(255, 255, 255, 1);
  border-radius: m-w(10);
  padding: 15px m-w(20);
  margin-top: 10px
}
.check_box {
  display: flex;
  align-items: center;
  i {
    color: #a9aec0;
  }
}
.c_1 {
  font-size: m-w(28);
  font-family: PingFang SC;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
  margin-left: m-w(19);
}
.c_2 {
  width: m-w(92);
  height: 15px;
  border: 1px solid rgba(255, 98, 0, 1);
  border-radius: 5px 0px 5px 0px;
  font-size: m-w(20);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(255, 98, 0, 1);
  margin-left: m-w(22);
  margin-right: m-w(10);
}
.goods_detai_box {
  margin-top: 24px;
}
.pop_img_box {
  width: m-w(260);
  height: 130px;
  border-radius: 5px;
  position: relative;
  img {
    height: 100%;
    width: 100%;
    border-radius: 5px;
  }
  .pop_tag {
    width: m-w(94);
    height: 16px;
    position: absolute;
    left: 0;
    top: 7px;
  }
}

.goods_de_1 {
  display: flex;
  flex: 1;
}
.tit_box {
  display: flex;
  align-items: center;
  font-size: m-w(28);
  font-family: PingFang SC;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
}
.t_1 {
  @extend .c_2;
  color: #00c657;
  width: m-w(105);
  border-color: #00c657;
}
.infi_box {
  margin-left: m-w(20);
  flex: 1;
}
.tag_box {
  margin-top: 5px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  span {
    margin-top: 5px;
    padding: 2px 8px;
    background: rgba(235, 235, 235, 1);
    font-size: m-w(20);
    margin-right: m-w(18);
    font-family: PingFang SC;
    font-weight: 300;
    color: #a9aec0;
    border-radius: 2px;
  }
}
.er_q {
  width: 66px;
  margin-top: 10px;
  background: #fff0e6;
  padding: 3px m-w(3);
  font-size: m-w(20);
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(255, 98, 0, 1);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
}
.pic_1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  .p_1 {
    font-size: m-w(36);
    font-family: PingFang SC;
    font-weight: bold;
    color: rgba(255, 98, 0, 1);
    span {
      font-size: m-w(20);
      font-family: PingFang SC;
      font-weight: bold;
      color: rgba(255, 98, 0, 1);
    }
  }
}
.g_1 {
  display: flex;
  align-items: center;
}
.g_2 {
  margin-right: 10px;
}
.steper {
  button,
  input {
    background: white;
    border-top: 1px solid #eeeef8;
    border-bottom: 1px solid #eeeef8;
  }
  button {
    border: 1px solid #eeeef8;
  }
}
.bott_cout {
  @extend .flex;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: white;
  padding: 18px 0;
  .check_1 {
    margin-left: m-w(25);
  }
  .b_c_1 {
    display: flex;
    align-items: center;
  }
  .b_c_2 {
    font-size: m-w(28);
    font-family: PingFang SC;
    font-weight: bold;
    color: rgba(255, 98, 0, 1);
    margin-right: m-w(35);
    span {
      color: #333333;
    }
  }
}
.buy {
  width: m-w(174);
  height: 33px;
  background: rgba(0, 198, 87, 1);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: m-w(24);
  font-family: PingFang SC;
  font-weight: bold;
  color: rgba(255, 255, 255, 1);
  margin-right: m-w(20);
}
.hei2 {
  height: 70px;
}

</style>
